{%include "topo_180plus.html"%}
{%load filtros%}
<div id="shadowing"></div>
	<div id="box_light">
		<span id="boxtitle"></span>
		<a class="fecha_box" onClick="closebox()">X</a>
		<div class="chamada_destaque">
			<img src="imagens/destaque.png"/>
			<p class="titulo_destaque"><strong style="font: 25px arial;color:#f57f1c;">Destaque o seu anuncio!</strong></p>	
			<p class="descricao_destaque">De destaque ao seu an&uacute;ncio e aumente a visibilidade do seu an&uacute;ncio. <a href="#">Saiba mais.</a></p>	
		</div>
		<div class="box_opcao">
			<h4>Opcoes de destaque para seu an&uacute;ncio</h4>
			<div class="pacotes">
				<input type="checkbox" name="check_opc" />
				<p><strong>Pacote 1:</strong> Seus an&uacute;ncios na barra lateral no portal 180graus.</p>
				<p class="valor"><strong>R$ 5,00/semana</strong></p>
				<select>
					<option value="1" selected>1 semana</option>
					<option value="2">2 semanas</option>
					<option value="3">3 semanas</option>
					<option value="4">4 semanas</option>
					<option value="5">5 semanas</option>
				</select>												
			</div>
			<div class="pacotes">
				<input type="checkbox" name="check_opc" />
				<p><strong>Pacote 2:</strong> Seus an&uacute;ncios no topo de an&uacute;ncios e resultados de pesquisas no classi180</p>
				<p class="valor"><strong>R$ 5,00/semana</strong></p>
				<select>
					<option value="1" selected>1 semana</option>
					<option value="2">2 semanas</option>
					<option value="3">3 semanas</option>
					<option value="4">4 semanas</option>
					<option value="5">5 semanas</option>
				</select>												
			</div>
			<div class="pacotes">
				<input type="checkbox" name="check_opc" />
				<p><strong>Pacote 3:</strong> Seus anuncios na sessao "An&uacute;ncios em destaque" contidas na p&aacute;gina do 180graus e p&aacute;ginas inicial e de produtos do classi180.</p>
				<p class="valor"><strong>R$ 25,00/semana</strong></p>
				<select>
					<option value="1" selected>1 semana</option>
					<option value="2">2 semanas</option>
					<option value="3">3 semanas</option>
					<option value="4">4 semanas</option>
					<option value="5">5 semanas</option>
				</select>												
			</div>
			<div class="pacotes">
				<input type="checkbox" name="check_opc" />
				<p><strong>Pacote 3:</strong> Seus an&uacute;ncios na sess&atilde;o "An&uacute;ncios em destaque" contidas na p&aacute;gina do 180graus e p&aacute;ginas inicial e de produtos do classi180.</p>
				<p class="valor"><strong>R$ 25,00/semana</strong></p>
				<select>
					<option value="1" selected>1 semana</option>
					<option value="2">2 semanas</option>
					<option value="3">3 semanas</option>
					<option value="4">4 semanas</option>
					<option value="5">5 semanas</option>
				</select>												
			</div>
			<input type="button" id="btn_destacar" onclick="showDiv('escolhas','btn_destacar')" value="Destacar Anuncio" />
			<div id="escolhas" class="pacotes">
				<h4>Confirma&ccedil;&atilde;o de escolhas:</h4>
				<p>Voc&ecric; esta contratando os servi&ccedil;os: <strong>(<em>Pacote 1</em> - por 2 semanas)</strong> + <strong>(<em>Pacote 2</em> - por 1 semana)</strong> + <strong>(<em>Pacote 3</em> - por 4 semanas)</strong></p>
				<p><strong>Total de: <em>R$ 115,00</em></strong></p>
				<button>Confirmar</button>
			</div>
		</div>
	</div>
	<div id="principal">
		<div id="meio">
			<div id="conteudo">
				{%include "header.html"%}
				<div id="box_perfil">
					<div class="barra_inf">
						<p class="titulo">Meus An&uacute;ncios</p>
						<div class="inf">
							<p>{{quantidadeAnuncio}} an&uacute;ncios | {{usuario.quantidadeAcesso}} visitas</p>
						</div>
					</div>
					<div id="box_perfil_esquerda">
						<div class="foto_perfil">
							<img src="{{MEDIA_URL}}/{{usuario.foto}}"/>
							<a href="#"><span>alterar foto</span></a>
						</div>
                        <a href="/login/"><span class="icon user_icon_edit"></span>Perfil</a>	
                        <a href="/minhasmensagens/{{usuario.id}}"><span class="icon msg_icon"></span>Minhas Mensagens<span class="icon">(3)</span></a>	
                        <a href="/meusAnuncios/{{usuario.id}}"><span class="icon anuncios_icon"></span>Meus An&uacute;ncios</a>	
						<button type="submit" class="" onclick="location.href='/anunciar/'">Publicar Novo An&uacute;ncio</button>
					</div>
					<div id="box_perfil_direita">
						<div class="perfil_inf">
							<div class="nav_lista">
								<div class="num_resultados"><p>1-{%if quantidadeAnuncio < 10%}{{quantidadeAnuncio}}{%else%}10{%endif%} de <strong>{{quantidadeAnuncio}}</strong></p></div>
								<div class="box_ordenar">
									<p>Ordenar por:
										<select>
											<option value="1" selected>Melhor Resultado</option>
											<option value="2">Ativos</option>
											<option value="3">Inativos</option>
											<option value="4">Mais Vistos</option>
											<option value="5">Mais Recentes</option>
											<option value="5">Mais Antigos</option>
										</select>												
									</p>
								</div>
							</div>
							<ul class="box_anuncios">
								{%for anuncioListagem in anuncios%}
								<li class="linha  b_anuncios">
									<a class="img_anuncio" href="/anuncio/{{anuncioListagem.id}}"><img src="{{MEDIA_URL}}{{anuncioListagem.foto}}" /></a>
									<a class="nome_anuncio" href="/anuncio/{{anuncioListagem.id}}">{{anuncioListagem.descricao}}</a>
									<span class="preco_anuncio">
										<em>R$ {{anuncioListagem.preco}}</em>
									</span>
									<p class="data_publicacao">Publicado no <strong><span>Classi</span>180</strong> {{anuncioListagem.cidade}}-{{anuncioListagem.cidade.estado}} dia <strong>{{anuncioListagem.dataCadastro.date.day}}/{{anuncioListagem.dataCadastro.date.month}} </strong></p>
			                        <div class="opcoes">
				                        <p class="editar_anuncio"> <a href="#">Editar anuncio</a></p>	
				                        <p class="perguntas"> <a href="/mensagens/{{usuario.id}}/{{anuncioListagem.id}}">Comentarios</a></p>
				                        <p class="destacar"> <a href="#">Destacar anuncio</a></p>
									</div>
									<button class="btn-detalhes" type="submit" class="">ATIVO</button>
									<p class="aviso">Falta(m) <strong>{{anuncioListagem.faltaTempo}}</strong> dia(s) para vencer</p>
									<div class="box_detalhes">
										<img src="{{MEDIA_URL}}imagens/balao_detalhes.png"/>
										<h3>Detalhes do Destaque</h3>
										<a class="fecha_box" >X</a>
										<p class="status_pacote">Pacote 1: <strong>10</strong> <em>dia(s).</em></p><a class="icon_mais" href="#" title="Saiba mais sobre o Pacote 1."></a>
										<p class="status_pacote">Pacote 2: <strong>0</strong> <em>dia(s).</em></p><a class="icon_mais" href="#" title="Saiba mais sobre o Pacote 2."></a>
										<p class="status_pacote">Pacote 3: <strong>120</strong> <em>dia(s).</em></p><a class="icon_mais" href="#" title="Saiba mais sobre o Pacote 3."></a>
										<p class="status_pacote">Pacote 4: <strong>1.000.000</strong> <em>dia(s).</em></p><a class="icon_mais" href="#" title="Saiba mais sobre o Pacote 4."></a>
										<p class="status_pacote">Pacote 5: <strong>0</strong> <em>dia(s).</em></p><a class="icon_mais" href="#" title="Saiba mais sobre o Pacote 5."></a>
										<p class="status_pacote">Pacote 6: <strong>0</strong> <em>dia(s).</em></p><a class="icon_mais" href="#" title="Saiba mais sobre o Pacote 6."></a>
										<button type="submit" onClick="openbox('', 1)">COMPRAR PACOTE</button>
										<!-- <p class="obs_pacote">(Voce pode comprar mais pacotes e acrescentar mais destaque a esse anuncio.)</p> -->
									</div>
								</li>
								{%endfor%}
							</ul>
						</div>
					</div>
				</div>
				<div id="box_direita">
					<div class="anuncios_lateral_perfil">
						<div class="box_titulo">
							<h4 class="titulo_anuncio">&Uacute;ltimos an&uacute;ncios</h4>
						<!-- <form class="opc_busca">
								<select>
									<option>Todos</option>
									<optgroup label="Categorias">
										<option>Categorias</option>
										<option>Empregos</option>
										<option>Imoveis</option>
										<option>Negocios</option>
										<option>Veiculos</option>
									</optgroup>
									<optgroup label="Cidades">
										<option>Teresina</option>
										<option>Parnaiba</option>
									</optgroup>
								</select>
							</form>  -->
						</div>
						<ul class="box_anuncios pag_perfil">
							{%for ultimo in ultimos%}
							<li class="linha b_anuncios">
								<a class="img_anuncio" href="/produto/{{ultimo.id}}"><img src="{{MEDIA_URL}}{{ultimo.thumbnail}}"/></a>
								<a class="nome_anuncio" href="#">{{ultimo.descricao}}</a>
								<span class="preco_anuncio">
									<em>R$ {{ultimo.preco}}</em>
								</span>
							</li>
							{%endfor%}
						</ul>
					</div>
					<div class="ads_lateral">
					
					</div>
					<div class="anuncios_lateral_perfil blog_perfil">
						<div class="box_titulo">
							<h4 class="titulo_anuncio">Blog classi180</h4>
						<!-- 	<form class="opc_busca">
								<select>
									<option>ultimas noticias</option>
									<option>Mais lidas</option>
									<option>Mais comentadas</option>
									<option>Promocoes</option>
									<option>Enquetes</option>
									<option>Dicas</option>
									<option>Novidades no Classi180</option>
								</select>
							</form> -->
						</div>
						<ul class="box_anuncios pag_perfil">
						{%for noticia in noticias%}
							<li class="linha b_perfilblog">
								<span>+</span>
								<a class="nome_anuncio" href="#">{{noticia.titulo}}</a>
							</li>
						{%endfor%}
						</ul>
					</div>
				</div>
				<div id="box_anuncios_vendedor">
					<div class="box_titulo">
						<h4 class="titulo_anuncio">Recomendados para voc&ecirc;</h4>				
						<!-- <form class="opc_busca">
							<select>
								<option>Cidades</option>
								<option>Teresina</option>
								<option>Parnaiba</option>
							</select>
							<select>
								<option>Categorias</option>
								<option>Empregos</option>
								<option>Imoveis</option>
								<option>Negocios</option>
								<option>Veiculos</option>
							</select>
							<input type="text">
							<input type="button">
						</form>  -->
					</div>
					<ul class="box_anuncios">
						<li class="linha">
							{%for recomendado in recomendados%}
							{%if forloop.counter|divisibleby:"3"%}
								<li class="box  b_perfil last">
									<a href="/anuncio/{{recomendado.id}}">
										<span>
											<img src="{{MEDIA_URL}}{{recomendado.thumbnail}}"/>
										</span>
										<span class="nome_produto">
											{{recomendado.descricao}}
										</span>
										<span class="preco_produto">
											<em>R$ {{recomendado.preco}}<sup>,00</sup></em>
										</span>
									</a>
								</li>
								</ul>
							</li>
							<li class="linha">
								<ul class="box_linha bl_perfil">
							{%else%}
									<li class="box  b_perfil">
										<a href="/anuncio/{{recomendado.id}}">
											<span>
												<img src="{{MEDIA_URL}}{{recomendado.thumbnail}}"/>
											</span>
											<span class="nome_produto">
												{{recomendado.descricao}}
											</span>
											<span class="preco_produto">
												<em>R$ {{recomendado.preco}}<sup>,00</sup></em>
											</span>
										</a>
									</li>
									{%endif%}
								{%endfor%}
						</li>
					</ul>				
				</div>
			</div>
		</div>	
		<div id="publicidade">
			<div class="publicidade_link">
				<a href="#" title="Publicidade 3" ><img src="{{MEDIA_URL}}imagens/pub4.png">Publicidade 3</a> 
			</div>
		</div>
	</div>
	{%include "rodape_regioes.html"%}
</body>
</html>